<!-- 空间预约弹框 -->
<template>
    <el-dialog title="新增学生" :visible.sync="addDialogVisible" width="40%" :before-close="handleClose">
        <div>
            <el-form ref="addStudentsRef" size="medium" label-width="80px" :inline="true" :model="addStudentForm"
                class="demo-form-inline">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属院系" prop="faculty">
                            <el-input v-model="addStudentForm.faculty" placeholder="请输入所属院系"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学生姓名" prop="studentName">
                            <el-input v-model="addStudentForm.studentName" placeholder="请输入学生姓名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="addStudentForm.sex" placeholder="请选择性别">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年级" prop="studentYear">
                            <el-input v-model="addStudentForm.studentYear" placeholder="请输入年级"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="学号" prop="StudentId">
                            <el-input v-model="addStudentForm.StudentId" placeholder="请输入学号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="专业" prop="specialty">
                            <el-input v-model="addStudentForm.specialty" placeholder="请输入专业"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号" prop="idNumber">
                            <el-input v-model="addStudentForm.idNumber" placeholder="请输入身份证号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="contactNumber">
                            <el-input v-model="addStudentForm.contactNumber" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>

export default {
    data() {
        return {
            // 弹框的显示与隐藏
            addDialogVisible: false,
            // 新增表单
            addStudentForm: {
                // 院系
                faculty: '',
                // 学生姓名
                studentName: '',
                // 学生性别 1 男  2 女
                sex: '',
                // 学生年级
                studentYear: '',
                // 学号
                StudentId: '',
                // 身份证号
                idNumber: '',
                // 联系电话
                contactNumber: '',
                // 专业
                specialty: ''

            },
            addStudentForm1: {
                // 院系
                faculty: '',
                // 学生姓名
                studentName: '',
                // 学生性别 1 男  2 女
                sex: '',
                // 学生年级
                studentYear: '',
                // 学号
                StudentId: '',
                // 身份证号
                idNumber: '',
                // 联系电话
                contactNumber: '',
                // 专业
                specialty: ''

            },
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 打开弹窗
        openDialog(e) {
            if (e == 1) {
                this.addStudentForm = this.addStudentForm1
                this.addDialogVisible = true
            } else {
                this.addStudentForm = e
                this.addDialogVisible = true
            }

        },
        // 弹窗关闭执行的函数
        handleClose() {
            this.addDialogVisible = false
        },
    },
};
</script>
<style lang="less" scoped>
/deep/.el-input--suffix .el-input__inner {
    padding-right: 16px;
}
</style>